<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
  <% include("/include/header3.html",{"title":""}){} %>
</head>
<body>

<div id="app">
  <div class="mainBox ">
    <div class="main-container layui-card">
      <div class="layui-card-body">

        <t-form ref="formRef" :data="form" :rules="rules" :disabled="loading" scroll-to-first-error="smooth" colon requiredMark>
          <t-row :gutter="[40,20]">
            <t-col :xs="12" :sm="6">
              <t-form-item label="数据库表名" name="dbTable">
                <t-select v-model="form.dbTable" placeholder="选择数据库表名" tips="选择要生成代码的数据库表" filterable clearable @change="selectTable">
                  <t-option :key="index" :label="item.tableName+'_'+item.tableRemark" :value="item.tableName" v-for="(item,index) in dbTables"></t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="主键" name="dbTableKey">
                <t-select v-model="form.dbTableKey" :loading="tableColumnsLoad" placeholder="选择主键" filterable clearable>
                  <t-option :key="index" :label="item.columnName+'_'+item.columnRemark" :value="item.columnName" v-for="(item,index) in tableColumns"></t-option>
                </t-select>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="移除表前缀" name="tablePrefix">
                <t-radio-group v-model="form.tablePrefix" @change="tablePrefixChange">
                  <t-radio :value="1">移除</t-radio>
                  <t-radio :value="0">不移除</t-radio>
                </t-radio-group>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="类名" name="className">
                <t-input v-model="form.className" placeholder="请输入类名" tips="实体类名称以及其他功能名称前缀命名"></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="功能名" name="functionName">
                <t-input v-model="form.functionName" placeholder="请输入功能名" tips="功能名称，一般与表注释一致"></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="业务名" name="busName">
                <t-input v-model="form.busName" placeholder="请输入业务名" tips="模块下包含controller、service等代码包的上层包"></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="生成方式" name="generateType">
                <t-radio-group v-model="form.generateType">
                  <t-radio :value="1">下载压缩包</t-radio>
                  <t-radio :value="2">生成到项目内</t-radio>
                </t-radio-group>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="作者" name="authorName">
                <t-input v-model="form.authorName" placeholder="请输入作者名"></t-input>
              </t-form-item>
            </t-col>
            <t-col :xs="12" :sm="6">
              <t-form-item label="包名" name="packageName">
                <t-input v-model="form.packageName" placeholder="请输入包名"></t-input>
              </t-form-item>
            </t-col>
          </t-row>

        </t-form>
      </div>
    </div>
  </div>
  <div class="bottom">
    <t-space class="button-container">
      <t-button :loading="loading" theme="primary" @click="onSave"><i class="layui-icon layui-icon-ok mr-5 text-size-14"></i>保存</t-button>
      <t-button theme="warning" @click="closeBtn.close"><i class="layui-icon mr-5 text-size-14" :class="closeBtn.i"></i>{{closeBtn.t}}</t-button>
    </t-space>
  </div>
</div>

<script>
  const PATH_URL = "gen/basic/";
  const MENU_URL = "sys/menu/";
  const APP_URL = "sys/app/"
</script>

<script>
  setupVue("#app", {
    setup() {
      // 表单相关
      const loading = Vue.ref(false);
      const formRef = Vue.ref(null);
      // 表单数据
      const form = Vue.ref({ tablePrefix: 1, generateType: 1, authorName: "wangbuhao", packageName: "org.szy" });
      const rules = {
        dbTable: [$required("选择要生成代码的数据库表")],
        tablePrefix: [$required("请选择是否移除表前缀")],
        dbTableKey: [$required('请选择主表主键')],
        generateType: [$required('请选择生成方式')],
        functionName: [$required('请输入功能名')],
        busName: [$required('请输入业务名')],
        className: [$required('请输入类名')],
        packageName: [$required('请输入包名')],
        sortCode: [$required('请选择排序')],
        authorName: [$required('请输入作者名')]
      };
      // 获取表单数据
      const getForm = (id) => req(axiosGet, PATH_URL + "getInfo", { id }, (res) => {
        if (res.code === 200) {
          form.value = res.data;
          if (form.value.dbTable) fetchTableColumns(form.value.dbTable);
        } else {
          $baseAlert(res.msg, () => closeLayer());
        }
      }, loading);
      const LyData = getLayerData();
      if (LyData && LyData.id) getForm(LyData.id);
      else {

      }


      // 可以选择的数据表列表
      const dbTables = Vue.ref([]);
      const fetchDbTables = () => $fetch(axiosGet, PATH_URL + "tables", {}, dbTables);
      fetchDbTables();
      // 选择表名称
      const selectTable = (value) => {
        fetchTableColumns(value);
        formFieldAssign(value);
      }
      // 表单内设置默认的值
      const formFieldAssign = (value) => {
        const data = dbTables.value.find((item) => item.tableName === value)
        form.value.functionName = data.tableRemark
        form.value.className = getClassName(data.tableName)
        tablePrefixChange();
      }
      // 获取数据库表的驼峰命名
      const getClassName = (tableName) => {
        if (tableName) {
          const arr = tableName.toLowerCase().split('_')
          form.value.packageName = form.value.packageName + arr[0];
          for (let i = 0; i < arr.length; i++) {
            // charAt()方法得到第一个字母，slice()得到第二个字母以后的字符串
            arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1)
          }
          return arr.join('')
        }
        return ''
      }

      // 表内所有字段信息
      const tableColumns = Vue.ref([]);
      const tableColumnsLoad = Vue.ref(false);
      // 表内所有字段信息
      const fetchTableColumns = (dbTable) => $fetch(axiosGet, PATH_URL + "tableColumns", { dbTable }, tableColumns);

      // 点击选择是否移除前缀
      const tablePrefixChange = () => {
        const tableName = form.value.dbTable
        if (tableName) {
          form.value.busName = getTableNameToHump(tableName);
        }
      }
      // 获取数据库表名的驼峰命名
      const getTableNameToHump = (tableName) => {
        if (tableName) {
          const arr = tableName.toLowerCase().split('_')
          if (form.value.tablePrefix === 1) {
            arr.splice(0, 1)
          }
          for (let i = 1; i < arr.length; i++) {
            // charAt()方法得到第一个字母，slice()得到第二个字母以后的字符串
            arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1)
          }
          return arr.join('')
        }
        return ''
      }

      //  菜单类型选项
      const appOptions = Vue.ref([]);
      // $fetch(axiosGet, APP_URL + "list", {columnField: "name,code", status: 1}, appOptions);

      // 点击保存
      const onSave = () => {
        formRef.value.validate().then((validateResult) => {
          if (validateResult && Object.keys(validateResult).length) {
            const firstError = Object.values(validateResult)[0]?.[0]?.message;
            $baseMsg(firstError);
          } else {
            let REQ;
            let URL;
            if (form.value.id) {
              REQ = axiosPut, URL = PATH_URL + "update";
            } else {
              REQ = axiosPost, URL = PATH_URL + "add";
            }
            req(REQ, URL, form, (res) => {
              $baseAlert(res.msg, () => {
                if (res.code === 200) closeLayer(parent.reloadData);
              })
            }, loading);
          }
        });
      }

      // 关闭方法
      const closeBtn = useCloseBtn();
      return {
        formRef, loading, form, rules, closeBtn,
        onSave,
        dbTables, selectTable,
        tableColumns, tableColumnsLoad,
        tablePrefixChange,
        appOptions
      }

    }
  });
</script>


</body>
</html>
